<template>
  <div class="container">
    <van-sticky>
      <van-tabs :active="activeIndex" @change="tabClick" color="#f8c400" :border="false">
        <div v-for="(item, index) in tabData" :key="index">
          <van-tab v-if="item.count" :title="item.name + '(' + item.count +')'" title-style="font-size:32rpx;"></van-tab>
          <van-tab v-else :title="item.name" title-style="font-size:32rpx;"></van-tab>
        </div>
      </van-tabs>
    </van-sticky>
    <div class="apply-list">
      <div class="apply-item" v-for="(item, index) in applyList" :key="index"
        @click="$pt.navigateTo({url: '/pages/home/live-apply/detail-info/main?applyId=' + item.applyId})">
        <div class="apply-item_content">
          <div class="nameplate" v-if="fileSpace && item.applyStatus === 1" :style="'background-image: url('+ fileSpace + '/images/shop-nameplate-1.png' +')'">通过</div>
          <div class="nameplate" v-if="fileSpace && item.applyStatus === 0" :style="'background-image: url('+ fileSpace + '/images/shop-nameplate-2.png' +')'">审核中</div>
          <div class="nameplate" v-if="fileSpace && item.applyStatus === 2" :style="'background-image: url('+ fileSpace + '/images/shop-nameplate-3.png' +')'">未通过</div>
          <div class="bc-img-wrap">
            <img v-if="item.feedsImg" :src="item.feedsImg" class="bc-img" alt="">
          </div>
          <div class="flex-item mar-l-10">
            <div class="line-2 broadcast-title">{{item.roomName}}</div>
            <div class="room-info font-11">
              <div class="flex">
                <span class="info_label">计划开播</span>
                <span class="flex-item width-105 font-color-6 mar-l-10">{{item.startDate}}</span>
              </div>
              <div class="flex">
                <span class="info_label">计划结束</span>
                <span class="flex-item width-105 font-color-6 mar-l-10">{{item.endDate}}</span>
              </div>
              <div class="flex">
                <span class="info_label">主播昵称</span>
                <span class="font-color-6 mar-l-10">{{item.anchorName}}</span>
              </div>
              <div class="flex">
                <span class="info_label">主播微信</span>
                <span class="font-color-6 mar-l-10">{{item.anchorWechat}}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="align-r pad-t-8 pad-r-5">
          <div class="apply-again reason-btn" v-if="item.applyStatus === 2" @click.stop="refuseReason(item)">拒绝原因</div>
          <div class="apply-again mar-l-12" @click.stop="$pt.navigateTo({url: '/pages/home/live-apply/basic-info/main?applyId=' + item.applyId})">再次申请</div>
        </div>
      </div>
      <div v-if="finishedLine" class="base-line-shop pad-t-15 pad-b-15">
        <base-line title='我是有底线滴'></base-line>
      </div>
    </div>
    <div class="nodata" v-if="noData">
      <div class="align-c">
        <img v-if="fileSpace" class="width-130 height-113" :src="fileSpace + '/images/shop-b-nodata.png'" alt="">
      </div>
      <div class="font-13 font-color-6 text-align-c mar-t-12">暂未店播申请</div>
      <div class="height-300"></div>
      <div class="height-300"></div>
      <div class="apply-btn" @click="$pt.navigateTo({url: '/pages/home/live-apply/basic-info/main'})">立即申请</div>
    </div>
    <div class="height-54"></div>
    <div class="text-align-c submit-footer">
      <button class="submit-btn" @click="$pt.navigateTo({url: '/pages/home/live-apply/basic-info/main'})">申请店播</button>
    </div>
    <!--弹窗-->
    <div class="div-pop" catchtouchmove="true" v-if="showDialog">
      <div class="apply-dialog">
        <img class="apply-dialog-head" v-if="modal.src" :src="modal.src" alt="">
        <div v-if="modal.title" class="apply-dialog-title mar-t-28 mar-b-5">{{ modal.title }}</div>
        <div v-if="modal.titleSmall" class="apply-dialog-t-short mar-t-9">{{ modal.titleSmall }}</div>
        <div class="apply-dialog-info" :class="modal.contentSmall ? 'content-small' : ''" v-html="modal.content"></div>
        <div class="flex bottom-btn">
          <div v-if="modal.cancel" class="flex-item cancel-btn" @click="showDialog = false">{{ modal.cancel }}</div>
          <div v-if="modal.cancel && modal.confirm" class="border-line"></div>
          <div
            v-if="modal.confirm"
            class="flex-item submit-btn"
            :class="modal.confirmActive ? 'submit-apply' : ''"
            @click="showConfirm(modal.confirmType)">{{ modal.confirm }}</div>
        </div>
      </div>
      <div class="apply-dialog-bg" @click="showDialog = false"></div>
    </div>
  </div>
</template>
<script>
import { pagingRoomApply, countLiveRoom, listAnchorApply, updateAnchorPassHint } from '@/api/personal'
import baseLine from '@/components/BaseLine/index'
export default {
  components: { baseLine },
  data() {
    return {
      applyList: [],
      noData: false,
      finishedLine: false,
      params: {
        memberId: '',
        applyStatus: '',
        currentPage: 1,
        size: 10
      },
      pullLoad: {
        loading: false,
        finished: false
      },
      tabData: [],
      activeIndex: 0,
      showDialog: false,
      modal: {},
      applyStatus: null,
      hintFlag: null
    }
  },
  onShow() {
    this.tabData = []
    this.applyList = []
    this.params.memberId = this.getCustomerId
    this.params.currentPage = 1
    this.finishedLine = false
    this.$pt.removeStorageSync('liveBasicInfo')
    this.$pt.removeStorageSync('applyGoodsList')
    this.pagingRoomApply()
    this.listAnchorApply()
    this.initEls()
  },
  onReachBottom() {
    // 触底刷新
    if (!this.pullLoad.finished) {
      this.pagingRoomApply()
    }
  },
  methods: {
    listAnchorApply() {
      listAnchorApply({
        memberId: this.getCustomerId
      }).then((response) => {
        if (response.isError) return
        let resData = response.data
        if (resData.length) {
          resData.forEach(item => {
            this.applyStatus = item.applyStatus
            this.hintFlag = item.hintFlag
          })
        } else {
          this.applyStatus = -1
        }
        // '申请状态: -1 未申请;  0 待审核;  1 审核通过;  2审核未通过;'
        if (this.applyStatus === -1) {
          // 未申请主播
          this.showDialog = true
          this.modal = {
            title: '温馨提示',
            content: '成为主播后才可申请店播',
            cancel: '取消',
            confirm: '立即申请',
            confirmActive: true,
            confirmType: 1
          }
        } else if (this.applyStatus === 0) {
          // 已提交审核，带审核
          this.showDialog = true
          this.modal = {
            titleSmall: '申请已提交',
            content: '<p>请耐心等待</p><p>审核通过后获得主播功能权限</p>',
            contentSmall: true,
            src: this.fileSpace + '/images/wait-icon-2.png',
            cancel: '朕知道了'
          }
        } else if (this.applyStatus === 1 && this.hintFlag !== 1) {
          // 已通过审核
          this.showDialog = true
          this.modal = {
            titleSmall: '审核通过',
            src: this.fileSpace + '/images/success-icon-2.png',
            confirm: '立即申请店播',
            confirmActive: true,
            confirmType: 2
          }
        } else if (this.applyStatus === 2) {
          // 未通过申请
          this.showDialog = true
          this.modal = {
            titleSmall: '未通过申请',
            content: '<p>粉丝量太少</p>',
            contentSmall: true,
            src: this.fileSpace + '/images/failure-icon.png',
            cancel: '取消',
            confirm: '重新申请',
            confirmActive: true,
            confirmType: 1
          }
        }
      })
    },
    tabClick(index) {
      this.activeIndex = index.mp.detail.index
      this.params.applyStatus = this.activeIndex - 1
      this.params.applyStatus = this.params.applyStatus === -1 ? '' : this.params.applyStatus
      this.params.currentPage = 1
      this.applyList = []
      this.pagingRoomApply()
      this.initEls()
    },
    showConfirm(val) {
      this.showDialog = false
      if (val === 1) {
        this.$pt.navigateTo({url: '/pages/home/apply-anchor/main?applyStatus=' + this.applyStatus})
      } else if (val === 2) {
        console.log('立即申请店播')
        this.updateAnchorPassHint()
      } else {
        this.$pt.navigateTo({url: '/pages/home/live-apply/basic-info/main'})
      }
    },
    updateAnchorPassHint() {
      updateAnchorPassHint({
        memberId: this.getCustomerId
      }).then((response) => {
        if (response.isError) return
        console.log('')
      }).catch(() => {
      })
    },
    initEls() {
      countLiveRoom({
        memberId: this.getCustomerId
      }).then((response) => {
        if (response.isError) return
        let data = response.data
        this.tabData = [
          { name: '全部', type: 0, count: data.stayNum + data.adoptNum + data.rejectNum },
          { name: '审核中', type: 1, count: data.stayNum },
          { name: '已通过', type: 2, count: data.adoptNum },
          { name: '已拒绝', type: 3, count: data.rejectNum }
        ]
      }).catch(() => {
      })
    },
    pagingRoomApply() {
      this.noData = false
      this.finishedLine = false
      pagingRoomApply(this.params).then((response) => {
        if (response.isError) return
        response.data.records.forEach(item => {
          this.applyList.push(item)
        })
        this.params.currentPage++
        if (this.applyList.length === 0) {
          // 判断是否暂无数据
          this.noData = true
        }
        if (this.applyList.length === 0 || this.applyList.length >= response.data.total) {
          this.pullLoad.finished = true
        } else {
          this.pullLoad.finished = false
        }
        if (this.pullLoad.finished && this.applyList.length > 7) {
          this.finishedLine = true
        }
      }).catch(() => {
      })
    },
    refuseReason(item) {
      const that = this
      this.$pt.showModal({
        title: '拒绝原因',
        content: item.reject,
        confirmText: '前往修改',
        confirmColor: '#54a0ff',
        success: res => {
          if (res.confirm) {
            console.log('用户点击确定')
            that.$pt.navigateTo({url: '/pages/home/live-apply/basic-info/main?applyId=' + item.applyId})
          } else if (res.cancel) {
            console.log('用户点击取消')
          }
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
.apply-dialog-bg{
  display: block;
  position: fixed;
  z-index: 1100;
  width: 100%;
  height: 100%;
}
.apply-dialog{
  background-color: white;
  width: 234px;
  border-radius: 8px;
  overflow: hidden;
  line-height: 1;
  position: relative;
  z-index: 2100;
  text-align: center;
  .apply-dialog-head{
    height: 37px;
    width: 37px;
    border-radius: 50%;
    display: block;
    margin: 16px auto 0 auto;
  }
  .apply-dialog-title{
    text-align: center;
    color: #343434;
    font-size: 15px;
  }
  .apply-dialog-t-short{
    text-align: center;
    color: #343434;
    font-size: 15px;
    font-weight: bold;
  }
  .apply-dialog-info{
    display: flex;
    flex-direction: column;
    align-items: center;
    // justify-content: center;
    padding: 5px 0 0 0;
    line-height: 1.5;
    min-height: 90px;
    width: 100%;
    border-radius: 5px;
    margin: 0px auto;
    &.content-small{
      font-size: 11px;
      color: #b5b5b5;
    }   
  }
  .bottom-btn{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    border-top: #f6f6f6 1px solid;    
    .cancel-btn{
      background-color: #fff;
      color: #343434;
      font-size: 16px;
      height: 44px;
      line-height: 44px;
      text-align: center;
    }
    .submit-btn{
      background-color: #fff;
      color: #343434;
      font-size: 16px;
      height: 44px;
      line-height: 44px;
      text-align: center;
      &.submit-apply{
        color: #67adfd;
      }
    }
    .border-line{
      width: 1px;
      background-color: #f6f6f6;
    }
  }
}
.apply-list{
  padding: 10px 10px 0;
  .apply-item{
    margin-bottom: 10px;
    background: white;
    border-radius: 8px;
    padding: 11px 15px 8px 5px;
    position: relative;
    .nameplate{
      position: absolute;
      width: 38px;
      height: 28px;
      left: 5px;
      top: 0;
      font-size: 12px;
      text-align: center;
      line-height: 1;
      padding-top: 7px;
      background-size: 100%;
      background-repeat: no-repeat;
      color: white;
    }
    .apply-item_content{
      display: flex;
      padding: 0 5px 10px;
      border-bottom: 1px solid #F9F9F9;
      .bc-img-wrap{
        width: 120px;
        height: 120px;
        border-radius: 3px;
        overflow: hidden;
        background: black;
        .bc-img{
          width: 120px;
          height: 120px;
          border-radius: 3px;
        }
      }
      .broadcast-title{
        max-height: 35px;
        height: unset;
        font-size: 14px;
        font-weight: bold;
      }
      .room-info{
        height: 75px;
        line-height: 1;
        padding: 8px 10px;
        display: flex;
        box-sizing: border-box;
        flex-direction: column;
        justify-content: space-between;
        background: #FAFAFA;
        border-radius: 3px;
        margin-top: 6px;
        .info_label{
          color: #B5B5B5;
        }
      }
    }
    .apply-again{
      width: 89px;
      height: 31px;
      border: 1px solid #EBEBEB;
      border-radius: 15px;
      text-align: center;
      line-height: 31px;
      box-sizing: border-box;
      font-size: 13px;
    }
    .reason-btn{
      border: unset;
      background: #FFE100;
    }
  }
}
.nodata{
  padding-top: 149px;
  .apply-btn{
    width: 104px;
    height: 34px;
    line-height: 34px;
    text-align: center;
    border-radius: 17px;
    background: #ffe200;
    margin: 80px auto 0;
    font-weight: bold;
  }
}
.submit-footer{
  width: 100%;
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 10;
}
.submit-btn{
  width: 100%;  
  height: 54px;
  line-height: 54px;
  text-align: center;
  background: #ffe200;
  color: #333;
  font-size: 16px;
  &::after{
    border: unset;
  }
}
</style>
